<template>
	<view>

		<u-search placeholder="请输入搜索内容" :clearabled="true" margin="30rpx" bgColor="#eee" :showAction="false" disabled
			@click="Jump" v-model="keyword">
		</u-search>
		<!-- 轮播 -->
		<view class="banner">
			<!-- <u-swiper :list="banner1" @change="changeone" @click="clickone" height="400rpx"></u-swiper> -->
			<u-swiper :list="banner" indicator indicatorMode="line" circular></u-swiper>
		</view>

		<!-- 宫格 -->
		<u-grid :border="true" col="5">
			<u-grid-item v-for="(baseListItem,baseListIndex) in channel" :key="baseListIndex">
				<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.icon_url" :size="22"></u-icon>
				<text class="grid-text">{{baseListItem.name}}</text>
			</u-grid-item>
		</u-grid>
		<u-toast ref="uToast" />


		<view class="bottom">
			这是底部view
		</view>

	</view>
</template>

<script>
	import request from "@/request/request.js"
	export default {
		data() {
			return {
				banner: [],
				keyword: '请输入搜索内容',
				channel: [],



			}
		},

		async onLoad() {
			request({
				url: '',
				data: {},
				successCallBack: (res) => {
					console.log(res)
					let {
						banner,
						channel
					} = res.data.data

					banner.forEach(item => {
						this.banner.push(item.image_url)

					})
					channel.forEach(item => {
						this.channel.push({
							icon_url: item.icon_url,
							name: item.name
						})

					})
					console.log(this.channel)


				},
				failCallBack: (err) => {
					console.log(err)
				}
			})

		},


		methods: {
			Jump() {
				console.log(123)
				uni.navigateTo({
					url: "/pages/search/search"
				})
			}
		}
	}
</script>

<style>
	.swiper {
		height: 720rpx;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.bottom {
		position: fixed;
		left: 0;
		bottom: calc(var(--window-bottom) + 50rpx);
	}

	.banner {
		/* margin-top: 30rpx; */
	}
</style>
